import React, { memo, useState, useEffect, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import {
  getSizeImage,
  getYearMonthDay,
  getCount,
  getfg,
} from "@/utils/format-utils";
import { formalMinuteSeconds } from "@/utils/formatMinuteSecond";
import Four from "@/components/button/fourCheck";
import { NavLink } from "react-router-dom";
import { getPlaylistXq } from "../store/actionTypes";
import Loading from "@/components/loading";
import { SongListStyle } from "./style";

export default memo(function CollageSongList(props) {
  const trBoxRef = useRef();
  const dispatch = useDispatch();
  const [music, setMusic] = useState(1);

  const collectSongs = (id) => {};
  const zhuanfaSongs = (id) => {};
  const loadSongs = (id) => {};

  useEffect(() => {
    if (props.id) {
      dispatch(getPlaylistXq(props.id));
    }
  }, [dispatch, props.id]);

  const state = useSelector(
    (state) => ({
      playlists: state.getIn(["myMusicInfo", "playlists"]),
    }),
    shallowEqual
  );

  // (props.id)
  return (
    <SongListStyle>
      {state.playlists.length !== 0 ? (
        <div className="playlist-top-box">
          <div className="playlist-l">
            <img
              src={getSizeImage(state.playlists.playlist.coverImgUrl, 200)}
              alt=""
            />
            <span className="msk-p coverall"></span>
          </div>
          <div className="playlist-top-r">
            <div className="playlist-r-top">
              <i className="playlist-icon imgIcon"></i>
              <span className="playlist-r-top-text">
                {state.playlists.playlist.name}
              </span>
            </div>
            <div className="playlist-creator-box">
              <img
                src={getSizeImage(
                  state.playlists.playlist.creator.avatarUrl,
                  35
                )}
                alt=""
              />
              <a className="creator-nickname">
                {state.playlists.playlist.creator.nickname}
              </a>
              <img
                style={{
                  height: "13px",
                  width: "13px",
                  display: "inline-block",
                  verticalAlign: "middle",
                }}
                src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4761340159/e2c1/6fb5/f49b/353e6d1857f7c5f46426beb533427e53.png"
                alt=""
              />
              <span className="create-time">
                {getYearMonthDay(state.playlists.playlist.createTime)}&nbsp;创建
              </span>
            </div>
            <div className="playlist-play-box">
              <a title="播放" className="playlist-playbtn button2">
                <i className="button2">
                  <em className="ply button2"></em>
                  播放
                </i>
              </a>
              <a
                className="playlist-play-addlist button2"
                title="添加到播放列表"
              >
                {" "}
              </a>
              <a className="forbidA u-btn button2">
                <i className="u-btn-i button2 forbid">
                  {state.playlists.playlist.subscribedCount === 0
                    ? "收藏"
                    : getCount(state.playlists.playlist.subscribedCount)}
                </i>
              </a>
              <a className="u-btn button2">
                <i className="zf button2 u-btn-i">
                  {state.playlists.playlist.shareCount === 0
                    ? "分享"
                    : getCount(state.playlists.playlist.shareCount)}
                </i>
              </a>
              <a className="u-btn button2">
                <i className="xz button2 u-btn-i">下载</i>
              </a>
              <a className=" u-btn button2">
                <i className="pl button2 u-btn-i">
                  {state.playlists.playlist.commentCount === 0
                    ? "分享"
                    : getCount(state.playlists.playlist.commentCount)}
                </i>
              </a>
            </div>

            <div className="playlist-bq">
              {state.playlists.length !== 0 ? (
                state.playlists.playlist.tags.length !== 0 ? (
                  <div>
                    <span className="fl">标签:</span>
                    {state.playlists.playlist.tags.map((item, index) => {
                      return (
                        <NavLink
                          to={{
                            pathname: "/discover/songs/" + item,
                          }}
                          key={index}
                          className="u-tag button2 fl"
                        >
                          <i className="button2">{item}</i>
                        </NavLink>
                      );
                    })}
                  </div>
                ) : (
                  ""
                )
              ) : (
                ""
              )}
            </div>
            <div className="playlist-suggest">
              {state.playlists.length !== 0 ? (
                state.playlists.playlist.description !== null && "" ? (
                  <div>
                    <b style={{ lineHeight: "26px" }} className="fl">
                      介绍:&nbsp;&nbsp;
                    </b>
                    {state.playlists.playlist.description
                      ? state.playlists.playlist.description
                          .split("\n\n")
                          .map((item, index) => {
                            return (
                              <p
                                key={index}
                                style={{
                                  lineHeight: "26px",
                                  marginBottom: "10px",
                                }}
                              >
                                {item}
                              </p>
                            );
                          })
                      : ""}
                  </div>
                ) : (
                  ""
                )
              ) : (
                ""
              )}
            </div>
          </div>
        </div>
      ) : (
        <div className="loading">
          <Loading />
        </div>
      )}
      <div style={{ padding: "40px" }}>
        <div className="songTableTitle">
          <span className="song-list">歌曲列表</span>
          <span className="song-number">
            {state.playlists.code !== 200
              ? ""
              : state.playlists.playlist.trackCount}
            首歌
          </span>
          <div className="fr song-time-r">
            <span className="play-time">
              播放：
              <span className="play-time-number">
                {state.playlists.code !== 200
                  ? ""
                  : state.playlists.playlist.playCount}
              </span>
              次
            </span>
          </div>
        </div>
        <div className="playList-table">
          <table>
            <thead className="sprite_table">
              <tr>
                <th className="first-kb sprite_table"></th>
                <th className="bt sprite_table">
                  <div className="wp sprite_table">标题</div>
                </th>
                <th className="sc sprite_table">
                  <div className="wp sprite_table">时长</div>
                </th>
                <th className="gs sprite_table">
                  <div className="wp sprite_table">歌手</div>
                </th>
                <th className="zj sprite_table">
                  <div className="wp sprite_table">专辑</div>
                </th>
              </tr>
            </thead>
            <tbody>
              {state.playlists.code !== 200 ? (
                <tr></tr>
              ) : (
                state.playlists.playlist.tracks.map((item, index) => {
                  return (
                    <tr ref={trBoxRef} className="tr-box" key={item.id}>
                      <td className="tr-num">
                        <div className="tr-num-div">
                          <span>{index + 1}</span>
                          <i className="tr-name-play sprite_table"></i>
                        </div>
                      </td>
                      <td className="tr-name">
                        <div>
                          <NavLink
                            to={{
                              pathname: "/song",
                              search: "?id=" + item.id,
                            }}
                            className="tr-name-span fl"
                          >
                            {item.name}
                          </NavLink>
                          {item.tns != null ? (
                            <span>-({item.tns[0]})</span>
                          ) : item.alia.length !== 0 ? (
                            <span>-({item.alia[0]})</span>
                          ) : (
                            ""
                          )}
                        </div>
                        {item.mv !== 0 ? (
                          <NavLink
                            to={{
                              pathname: "/mv",
                              search: "?id=" + item.mv,
                            }}
                          >
                            <i className="sp-i sprite_table"></i>
                          </NavLink>
                        ) : (
                          ""
                        )}
                      </td>
                      <td className="tr-time">
                        <div className="tr-time-times">
                          {formalMinuteSeconds(item.dt)}
                        </div>
                        <div className="tr-time-box">
                          <Four
                            id={item.id}
                            collectSongs={(e) => collectSongs(item.id)}
                            zhuanfaSongs={(e) => zhuanfaSongs(item.id)}
                            loadSongs={(e) => loadSongs(item.id)}
                          />
                          {music === 1 ? (
                            <i
                              onClick={(e) => loadSongs(item.id)}
                              className="tr-time-rubbish sprite_table fl"
                            ></i>
                          ) : (
                            ""
                          )}
                        </div>
                      </td>
                      <td className="tr-songer">
                        <div>
                          <span>
                            {item.ar.map((itema, indexa) => {
                              return (
                                <NavLink
                                  to={{
                                    pathname: "/artist",
                                    search: "?id=" + itema.id,
                                  }}
                                  key={indexa}
                                >
                                  {getfg(itema.name, item, indexa)}
                                </NavLink>
                              );
                            })}
                          </span>
                        </div>
                      </td>
                      <td className="tr-zj">
                        <div>
                          <NavLink
                            to={{
                              pathname: "/album",
                              search: "?id=" + item.al.id,
                            }}
                          >
                            {item.name}
                          </NavLink>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </SongListStyle>
  );
});
